<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入Jquery -->
<script src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入样式 -->
<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 员工修改的模态框 -->
<div id="empUpdateModal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">员工修改</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">empName</label>
		    <div class="col-sm-10">
		      <p class="form-control-static" id="empName_update_static"></p>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">email</label>
		    <div class="col-sm-10">
		      <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@zx.com">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">gender</label>
		    <div class="col-sm-10">
		    	<label class="radio-inline">
				  <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">deptName</label>
		    <div class="col-sm-4">
		    	<!-- 部门提交部门id即可 -->
		    	<select class="form-control" name="dId" id="dept_update_select"></select>
		    </div>
		  </div>
		  
		  
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
      </div>
    </div>
  </div>
</div>

<!-- 员工添加的模态框 -->
<div id="empAddModal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
		  <div class="form-group">
		    <label class="col-sm-2 control-label">empName</label>
		    <div class="col-sm-10">
		      <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">email</label>
		    <div class="col-sm-10">
		      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@zx.com">
		      <span class="help-block"></span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">gender</label>
		    <div class="col-sm-10">
		    	<label class="radio-inline">
				  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
				</label>
				<label class="radio-inline">
				  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
				</label>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label">deptName</label>
		    <div class="col-sm-4">
		    	<!-- 部门提交部门id即可 -->
		    	<select class="form-control" name="dId" id="dept_add_select"></select>
		    </div>
		  </div>
		</form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8 text-right">
				<button id="emp_add_modal_btn" class="btn btn-primary">新增</button>
				<button id="emp_delete_all_btn" class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
					<thead>
						<tr>
							<th>
								<input type="checkbox" id="check_all"/>
							</th>
							<th>#</th>
							<th>empName</th>
							<th>gender</th>
							<th>email</th>
							<th>deptName</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6" style="line-height:74px;" id="page_info_area">
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
			</div>
		</div>
	</div>
	
	<!-- js -->
	<script type="text/javascript">
	//全局的总记录数，当前页码
	var totalRecord,currentPage; 
	//1、页面加载完成以后，直接去发送一个ajax请求，要到分页数据
	$(function(){
		//去首页
		to_page(1);
	});
	
	//去哪页
	function to_page(pn){
		$.ajax({
			url:"${APP_PATH}/emps",
			data:"pn="+pn,
			type:"get",
			success:function(result){
				//1、解析并显示员工数据
				build_emps_table(result);
				//2、解析并显示分页信息
				build_page_info(result);
				//3、解析并显示分页条数据
				build_page_nav(result);
			}
		});
	}
	
	//构建员工表格数据
	function build_emps_table(result){
		//清空table表格
		$("#emps_table tbody").empty();
		var emps = result.extend.pageInfo.list;
		$.each(emps, function(index, item){
			var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>")
			var empIdTd = $("<td></td>").append(item.empId);
			var empNameTd = $("<td></td>").append(item.empName);
			var genderTd = $("<td></td>").append(item.gender == "M" ? "男" : "女");
			var emailTd = $("<td></td>").append(item.email);
			var deptNameTd = $("<td></td>").append(item.department.deptName);
			var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
						.append(" 编辑");
			//为编辑按钮添加一个自定义的属性，来表示当前员工的id
			editBtn.attr("edit-id", item.empId);
			var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
						.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
						.append(" 删除");
			//为删除按钮添加一个自定义的属性，来表示当前员工的id
			delBtn.attr("delete-id", item.empId);
			var btnTd = $("<td></td>").append(editBtn)
						.append(" ")
						.append(delBtn);
			//append方法执行完成以后还是返回原来的元素
			$("<tr></tr>").append(checkBoxTd)
				.append(empIdTd)
				.append(empNameTd)
				.append(genderTd)
				.append(emailTd)
				.append(deptNameTd)
				.append(btnTd)
				.appendTo("#emps_table tbody");
		});
		
	}
	//构建分页信息数据
	function build_page_info(result){
		$("#page_info_area").empty();
		$("#page_info_area").append("当前 <kbd>"+result.extend.pageInfo.pageNum+"</kbd> 页"
				+ "，总 <kbd>"+result.extend.pageInfo.pages+"</kbd> 页" 
				+ "，总 <kbd>"+result.extend.pageInfo.total+"</kbd> 条记录");
		totalRecord = result.extend.pageInfo.total;
		currentPage = result.extend.pageInfo.pageNum;
	}
	//构建分页条数据
	function build_page_nav(result){
		$("#page_nav_area").empty();
		var ul = $("<ul></ul>").addClass("pagination");
		
		//构建元素
		var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
		var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
		if(result.extend.pageInfo.hasPreviousPage == false){
			firstPageLi.addClass("disabled");
			prePageLi.addClass("disabled");
		}else{
			//为元素添加点击分页的事件
			firstPageLi.click(function(){
				to_page(1);
			});
			prePageLi.click(function(){
				to_page(result.extend.pageInfo.pageNum - 1);
			});
		}
		
		//构建元素
		var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
		var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
		if(result.extend.pageInfo.hasNextPage == false){
			nextPageLi.addClass("disabled");
			lastPageLi.addClass("disabled");
		}else{
			//为元素添加点击分页的事件
			nextPageLi.click(function(){
				to_page(result.extend.pageInfo.pageNum + 1);
			});
			lastPageLi.click(function(){
				to_page(result.extend.pageInfo.pages);
			});
		}
		
		//添加首页和前一页的提示
		ul.append(firstPageLi).append(prePageLi);
		//1,2,3遍历给ul中添加页面提示
		$.each(result.extend.pageInfo.navigatepageNums, function(index, item){
			var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
			if(result.extend.pageInfo.pageNum == item){
				numLi.addClass("active");
			}
			numLi.click(function(){
				to_page(item);
			});
			ul.append(numLi);
		});
		//添加下一页和末页的提示
		ul.append(nextPageLi).append(lastPageLi);
		var navEle = $("<nav><nav>").append(ul);
		navEle.appendTo("#page_nav_area");
	}
	
	//清空表单样式及内容
	function reset_form(ele){
		//重置表单数据
		$(ele)[0].reset();
		//清空表单样式
		$(ele).find("*").removeClass("has-error has-success");
		$(ele).find(".help-block").text("");
	}
	
	//点击新增按钮弹出模态框
	$("#emp_add_modal_btn").click(function(){
		//清除表单数据（表单完整重置（表单的数据，表单的样式））
		reset_form("#empAddModal form");
		//发送ajax请求，查询部门信息，显示在下拉列表中
		getDepts("#empAddModal select");
		//弹出模态框
		$("#empAddModal").modal({
			backdrop:"static"
		});
	});
	
	//查出所有的部门信息并显示在下拉列表中
	function getDepts(ele){
		$.ajax({
			url:"${APP_PATH}/depts",
			type:"get",
			success:function(result){
				var depts = result.extend.depts;
				$("#dept_add_select").empty();
				$.each(depts, function(index, item){
					var optionEle = $("<option></optioon>").append(item.deptName).attr("value", item.deptId);
					optionEle.appendTo(ele);
				});
			}
		});
	}
	
	//校验表单数据
	function validate_add_form(){
		//1、拿到要校验的数据，使用正则表达式
		var empName = $("#empName_add_input").val();
		var regName = /(^[a-zA-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
		if(!regName.test(empName)){
			//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
			show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
			return false;
		}else{
			show_validate_msg("#empName_add_input", "success", "");
		}
		
		//2、校验邮箱信息
		var email = $("#email_add_input").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regEmail.test(email)){
			//alert("邮箱格式不正确");
			show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
			return false;
		}else{
			show_validate_msg("#email_add_input", "success", "");
		}
		return true;
	}
	
	//显示校验结果的提示信息
	function show_validate_msg(ele, status, msg){
		//清除当前元素的校验状态
		$(ele).parent().removeClass("has-success has-error")
		if("success" == status){
			$(ele).parent().addClass("has-success");
			$(ele).next("span").text(msg);
		}else if("error" == status){
			$(ele).parent().addClass("has-error");
			$(ele).next("span").text(msg);
		}
	}
	
	//点击保存，保存员工
	$("#emp_save_btn").click(function(){
		//1、模态框中填写的表单数据提交给服务器进行保存
		//1、先对要提交给服务器的数据进行校验
		/* 
		if(!validate_add_form()){
			return false;
		}	 
		*/	
		//1、判断之前的ajax用户名校验是否成功。如果不成功。
		if($(this).attr("ajax-va") == "error"){
			return false;
		}
		//2、发送ajax请求保存员工
		$.ajax({
			url:"${APP_PATH}/emp",
			type:"post",
			data:$("#empAddModal form").serialize(),
			success:function(result){
				if(100 == result.code){
					//员工保存成功
					//1、关闭模态框
					$("#empAddModal").modal("hide");
					//2、来到最后一页，显示刚才保存的数据
					to_page(totalRecord);
				}else{
					//显示失败信息
					//有哪个字段的错误信息就显示哪个字段的
					if(undefined != result.extend.errorFields.email){
						show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
					}
					if(undefined != result.extend.errorFields.empName){
						show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
					}
				}
				
			}
		});
	});
	
	//校验用户名是否可用
	$("#empName_add_input").change(function(){
		var empName = this.value;
		//发送ajax请求校验用户名是否可用
		$.ajax({
			url:"${APP_PATH}/checkuser",
			data:"empName=" + empName,
			type:"post",
			success:function(result){
				if(100 == result.code){
					show_validate_msg("#empName_add_input", "success", "用户名可用");
					$("#emp_save_btn").attr("ajax-va", "success");
				}else{
					show_validate_msg("#empName_add_input", "error", result.extend.va_msg);
					$("#emp_save_btn").attr("ajax-va", "error");
				}
			}
		});
	});
	
	//给后添加到页面中的编辑按钮绑定点击事件
	$(document).on("click", ".edit_btn", function(event){
		stopPropagation(event);
		//清除表单数据（表单完整重置（表单的数据，表单的样式））
		reset_form("#empUpdateModal form");
		//1、查出部门信息，并显示部门列表
		getDepts("#empUpdateModal select");
		//2、查出员工信息、显示员工信息
		getEmp($(this).attr("edit-id"));
		//3、把员工的id传递给模态框的更新按钮
		$("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
		//弹出模态框
		$("#empUpdateModal").modal({
			backdrop:"static"
		});
	});
	
	//发送ajax请求，获取员工信息
	function getEmp(id){
		$.ajax({
			url:"${APP_PATH}/emp/"+id,
			type:"get",
			success:function(result){
				var empData = result.extend.emp;
				$("#empName_update_static").text(empData.empName);
				$("#email_update_input").val(empData.email);
				$("#empUpdateModal input[name='gender']").val([empData.gender]);
				$("#empUpdateModal select").val([empData.dId]);
			}
		});
	}
	
	//点击更新，更新员工信息
	$("#emp_update_btn").click(function(){
		//1、校验邮箱信息
		var email = $("#email_update_input").val();
		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
		if(!regEmail.test(email)){
			show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
			return false;
		}else{
			show_validate_msg("#email_update_input", "success", "");
		}
		
		//2、发送ajax请求更新员工
		$.ajax({
			url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
			type:"put",
			data:$("#empUpdateModal form").serialize(),
			//type:"post",
			//data:$("#empUpdateModal form").serialize()+"&_method=put",
			success:function(result){
				//1、关闭模态框
				$("#empUpdateModal").modal("hide");
				//2、来到当前页，显示刚才更新的数据
				to_page(currentPage);
			}
		});
	});
	
	//给后添加到页面中的删除按钮绑定点击事件
	$(document).on("click", ".delete_btn", function(event){
		stopPropagation(event);
		//1、弹出是否确认删除对话框
		var empName = $(this).parents("tr").find("td:eq(2)").text();
		if(confirm("确认删除【"+empName+"】吗？")){
			//确认，发送ajax请求删除即可
			$.ajax({
				url:"${APP_PATH}/emp/"+$(this).attr("delete-id"),
				type:"delete",
				success:function(result){
					//回到本页
					to_page(currentPage);
				}
			});
		}
	});
	
	//完成全选、全不选
	$("#check_all").click(function(){
		//attr获取check属性是undefined
		//我们这些dom原生的属性用prop取。attr获取自定义属性的值
		$(this).prop("checked");
		$(".check_item").prop("checked", $(this).prop("checked"));
	});
	
	//check_item
	$(document).on("click", ".check_item", function(event){
		stopPropagation(event);
		//判断当前选中的元素是否5个
		var flag = $(".check_item:checked").length == $(".check_item").length;
		$("#check_all").prop("checked", flag);
	});
	
	//点击批量删除
	$("#emp_delete_all_btn").click(function(){
		var empName = "";
		var ids = "";
		$.each($(".check_item:checked"), function(index, item){
			empName += "【"+$(this).parents("tr").find("td:eq(2)").text()+"】";
			ids += $(this).parents("tr").find("td:eq(1)").text() + "-" ;
		});
		ids = ids.substring(0, ids.length-1);
		if(confirm("确认删除"+empName+"吗？")){
			//发送ajax请求删除
			$.ajax({
				url:"${APP_PATH}/emp/"+ids,
				type:"delete",
				success:function(result){
					//回到当前页
					to_page(currentPage);
				}
			});
		}
	});
	
	$(document).on("click", "#emps_table tbody tr", function(){
		$(this).find(".check_item").trigger("click");
	});
	
	//阻止冒泡方法
	function stopPropagation(e) {  
		e = e || window.event;  
		if(e.stopPropagation) { //W3C阻止冒泡方法  
	    	e.stopPropagation();  
		} else {  
		    e.cancelBubble = true; //IE阻止冒泡方法  
		}  
     }
	
	</script>
</body>
</html>